<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper-3.2.7.min.css">
    <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/hlsjwcj.css"/>

</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
        	<!--第一屏开始-->
            <div class="swiper-slide one">
            	<div class="top ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0s">
            		<img src="images/one.jpg"/>
            	</div>
            	<div class="bottom">
            		<img src="images/jiezhi.png" alt="" class="jiezhi ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="2s" />
            		<img src="images/womenjiehunla.png" alt="" class="jiehunla ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="2s" swiper-animate-delay="0.5s" />
            		<img src="images/2016117.png" alt="" class="time ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="3s"  />
            	</div>
            </div>
            <!--第一屏结束-->
            <!--第二屏开始-->
            <div class="swiper-slide two">
                 <div class="left ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
            	    <img src="images/two1.jpg"/>
                 </div>	
                   
                 <div class="right ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1.3s">
                 	<div class="t">
                 	<img src="images/two2.jpg"/>	
                 	</div>
                 	<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2.3s"/>
            		<img src="images/t1.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2.8s"/>
            		<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="3.8s"/>
            		<img src="images/t2.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="4.3s"/>
            		<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="5.3s"/>
            		<img src="images/t3.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="5.8s"/>
            		<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="6.8s"/>
            		<img src="images/t4.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="7.3s"/>
            		<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="8.3s"/>
            		<img src="images/t5.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="8.8s"/>
            		<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="9.8s"/>
                 </div>
                 <img src="images/fengche.gif" alt="" class="fengche ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="10.3s"/>
            </div>
            <!--第二屏结束-->
            <!--第三屏开始-->
            <div class="swiper-slide three">
            	<div class="top ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s">
            		<img src="images/three1.jpg"/>
            	</div>
            	<img src="images/aini.png" alt="" class="aini ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.8s"/>
            	<img src="images/yibeizi.png" alt="" class="yibeizi ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.8s"  />
            	<img src="images/hua.png" alt="" class="hua ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="2s"  />
            	<img src="images/hua2.png" alt="" class="hua2 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="2s" />
            	<img src="images/dog.png" alt="" class="dog ani" swiper-animate-effect="slideInRight" swiper-animate-duration="2s" swiper-animate-delay="2s"/>
            </div>
            <!--第三屏结束-->
            <!--第四屏开始-->
            <div class="swiper-slide four">
            	<div class="xx ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s">谢谢观赏</div>
            </div>
            <!--第四屏结束-->
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <!--音乐区开始-->
    <div id="music">
    	<img src="images/music.gif" alt="" class="music_bg" />
    	<img src="images/music.png" alt="" class="music_pic" />
    </div>
    <audio src="images/bgmusic.mp3" id="bgmusic" autoplay="autoplay"></audio>
    <!--音乐区结束-->
    <!-- Swiper JS -->
    <script src="js/swiper-3.2.7.min.js"></script>
    <script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/hlsjwcj.js" type="text/javascript" charset="utf-8"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
        swiperAnimateCache(swiper); //隐藏动画元素 
        swiperAnimate(swiper); //初始化完成开始动画
        }, 
        onSlideChangeEnd: function(swiper){ 
        swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  } 

    });
    </script>
</body>
</html>